<template>
  <div class="auth-layout">
    <div class="auth-content">
      <div class="login-view">
        <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" :size="size">
          <n-form-item path="user.username">
            <n-input v-model:value="formValue.user.username" placeholder="输入用户名" />
          </n-form-item>
          <n-form-item path="user.password">
            <n-input v-model:value="formValue.user.password" placeholder="输入密码" type="password" />
          </n-form-item>
          <n-form-item>
            <n-button strong secondary type="success" @click="handleValidateClick" class="login-btn">
              登录
            </n-button>
          </n-form-item>
          <n-form-item>
            <n-button strong secondary type="success" @click="handleFileClick" class="login-btn">
              选择文件
            </n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import router from '@/router'
import { useMessage } from 'naive-ui'
import { ref } from 'vue'

const message = useMessage()
const size = ref('medium')
const formRef = ref()
const formValue = ref({
  user: {
    username: 'admin',
    password: '123456'
  }
})
const rules = {
  'user.username': [
    {
      required: true,
      message: '请输入用户名',
      trigger: ['blur', 'change']
    }
  ],
  'user.password': [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur', 'change']
    }
  ]
}
function handleValidateClick(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors: string) => {
    if (!errors) {
      message.success('登录成功')
      localStorage.setItem('isLoggedIn', 'true')
      router.push('/')
    }
    else {
      console.log(errors)
      message.error('Invalid')
    }
  })
}
function handleFileClick() {
  window.pywebview.api.open_file_dialog('C:\\path', true, ['全部文件 (*.*)']).then(response => {
    console.log(response)
  })
}
</script>
<style>
.auth-layout {
  height: calc(100vh - var(--title-bar-height));
  display: flex;
  flex-direction: column;
}

.auth-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.login-view {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 50px;
  box-sizing: border-box;
}

.login-btn {
  width: 200px;
  margin: 0 auto;
}
</style>
